<template>
  <a-form :model="form" layout="vertical" autocomplete="off">
    <h3 class="mb-4">
      {{ busiType[form.type] }}
    </h3>
    <a-form-item v-if="form.type !== 'qrCode'" label="元素大小：">
      <a-space>
        <div>
          宽：<a-form-item-rest v-if="form.type === 'barCode'">
            <a-select
              ref="select"
              v-model:value="form.width"
              :options="barCodeWidthList"
              style="display: inline-block; width: 90px"
              @change="changeData"
            ></a-select>
            pt
          </a-form-item-rest>
          <a-form-item-rest v-else>
            <a-input-number v-model:value="form.width" style="width: 90px" @change="changeData"></a-input-number> pt
          </a-form-item-rest>
        </div>

        <div class="ml-6">
          高：
          <a-form-item-rest>
            <a-input-number v-model:value="form.height" style="width: 90px" @change="changeData"></a-input-number> pt
          </a-form-item-rest>
        </div>
      </a-space>
    </a-form-item>
    <a-form-item v-else label="二维码大小：">
      <a-select
        ref="select"
        v-model:value="form.width"
        :options="qrCodeSizeList"
        style="width: 274px"
        @change="qrCodeSizeChange"
      ></a-select>
      pt
    </a-form-item>
    <a-form-item label="元素位置：">
      <a-space>
        <div>
          X：<a-form-item-rest>
            <a-input-number
              v-model:value="form.left"
              style="width: 90px; margin-left: 5px"
              @change="changeData"
            ></a-input-number>
            pt</a-form-item-rest
          >
        </div>

        <div class="ml-6">
          Y：<a-form-item-rest
            ><a-input-number
              v-model:value="form.top"
              style="width: 90px; margin-left: 5px"
              @change="changeData"
            ></a-input-number>
            pt</a-form-item-rest
          >
        </div>
      </a-space>
    </a-form-item>
    <template v-if="form.type === 'word' || form.type === 'business'">
      <a-form-item v-if="form.type === 'word'" label="文字内容(最大长度：100)：">
        <a-input v-model:value="form.content" :maxlength="100" @change="changeData"></a-input>
      </a-form-item>
      <a-form-item label="文字大小：">
        <a-select ref="select" v-model:value="form.size" :options="fontSizeList"></a-select>
      </a-form-item>
      <template v-if="form.type === 'business'">
        <a-form-item label="分隔符：">
          <a-radio-group v-model:value="form.separator" buttonStyle="solid" @change="changeData">
            <a-radio-button value="/">/</a-radio-button>
            <a-radio-button value="-">-</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <template #label>
            业务字段
            <a-button
              shape="circle"
              :icon="h(PlusOutlined)"
              size="small"
              type="primary"
              class="ml-2"
              @click="showFieldModal"
            ></a-button>
          </template>
          <div>
            <Draggable
              :list="form.fields"
              :animation="100"
              item-key="fieldId"
              class="list-group"
              :force-fallback="true"
              ghost-class="ghost"
            >
              <template #item="{ element, index }">
                <div class="element-fieidItem" color="processing">
                  {{ element.fieldName }}
                  <a-button type="text" @click="delField(index)"><CloseOutlined /></a-button>
                </div>
              </template>
            </Draggable>
            <div style="font-size: 12px; color: #999">预览：{{ businessPreview }}</div>

            <!-- <a-tag v-for="(item, index) in form.fields" :key="item.fieldId" color="processing">{{
              item.fieldName
            }}</a-tag> -->
          </div>

          <div
            v-if="form.fields.length > 0"
            style="font-size: 12px; color: #999; border-top: 1px solid #ddd; padding: 12px 0; margin-top: 20px"
          >
            以下参数不影响真实标签打印，只在当前页面用于预览效果
          </div>
          <a-form-item v-for="item in form.fields" :key="'a' + item.fieldId" :label="`${item.fieldName}:`">
            <a-input v-model:value="item.sampleValue" max-length="100"></a-input>
          </a-form-item>
        </a-form-item>
      </template>
    </template>
  </a-form>
  <a-modal v-model:visible="visibleFields" title="选择业务字段" :mask-closable="false" :keyboard="false" @ok="handleOk">
    <a-card>
      <a-checkbox-group v-model:value="checkedFields" style="width: 100%">
        <div v-for="item in fieldList" class="mb-4">
          <h4>{{ item.configName }}</h4>
          <a-space>
            <a-checkbox v-for="field in item.fieldList" :value="field.fieldId">{{ field.fieldName }}</a-checkbox>
          </a-space>
        </div>
      </a-checkbox-group>
    </a-card>
  </a-modal>
</template>

<script lang="ts" setup>
import Draggable from 'vuedraggable'
import { PlusOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { computed, h, ref } from 'vue'
import { nextTick } from 'vue'
import { setFontSizeList, setBarCodeWidthList, setQrCodeSizeList } from '../form'
const fontSizeList = setFontSizeList()
const barCodeWidthList = setBarCodeWidthList()
const qrCodeSizeList = setQrCodeSizeList()
const visibleFields = ref(false)
const props = defineProps<{
  form: any
  fieldList: any[]
}>()
const fieldListMap = {}
props.fieldList.forEach((item) => {
  item.fieldList.forEach((el) => {
    el.businessType = item.businessType
    fieldListMap[el.fieldId] = el
  })
})

const checkedFields = ref<any[]>((props.form?.fields || []).map((item) => item.fieldId))

// 业务字段预览
const businessPreview = computed(() => {
  if (props.form.fields && props.form.fields.length > 0) {
    const arr: any[] = []
    props.form.fields.forEach((item) => {
      arr.push(item.sampleValue)
    })
    return arr.join(props.form.separator)
  }
  return ''
})

const busiType = {
  barCode: '条形码',
  qrCode: '二维码',
  word: '文本文字',
  business: '业务字段'
}

const emits = defineEmits(['changeData'])
function changeData() {
  nextTick(() => {
    emits('changeData')
  })
}

function qrCodeSizeChange(e) {
  props.form.height = e
  changeData()
}

function showFieldModal() {
  visibleFields.value = true
}
function handleOk() {
  // 删除已经去掉的
  props.form.fields = props.form.fields.filter((item) => checkedFields.value.includes(item.fieldId))
  // 新增
  checkedFields.value.forEach((item) => {
    const index = props.form.fields.findIndex((el) => el.fieldId === item)
    if (index === -1) {
      const { fieldId, fieldName, fieldCode, businessType, sampleValue } = fieldListMap[item]
      console.log(fieldListMap[item])
      props.form.fields.push({
        fieldId,
        fieldCode,
        fieldName,
        businessType,
        sampleValue
      })
    }
  })
  visibleFields.value = false
}

function delField(index) {
  props.form.fields.splice(index, 1)
  checkedFields.value = (props.form?.fields || []).map((item) => item.fieldId)
}
</script>

<style lang="less" scoped>
.list-group {
  display: flex;
  flex-wrap: wrap;
}
.element-fieidItem {
  // width: 200px;
  padding: 6px 6px 6px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin: 6px 6px 6px 0;
  cursor: pointer;
  .ant-btn {
    padding: 2px;
    height: 14px;
    margin-left: 4px;
  }
}
</style>
